<template>
  <div>
    <!-- 页面查询部分 -->
    <BaseCard>
      <!-- 全局表单组件 -->
      <UiForm v-model:formData="formData" v-bind="formConfig" @handleFormItemChange="handleFormItemChange">
        <!-- 插槽嵌套  UiForm 自定义插槽 custom-slot-->
        <template #custom-slot>
          <!-- UiQueryForm 默认插槽 -->
          <slot></slot>
        </template>
      </UiForm>
    </BaseCard>
  </div>
</template>

<script setup lang="js">
import { ref, computed } from "vue"

const emits = defineEmits(["update:modelValue", "callHandleFormItemChange"])

const props = defineProps({
  // 组件双向数据绑定
  modelValue: {
    type: Object,
    require: true
  },
  // 表单配置
  formConfig: {
    type: Object,
    require: true
  }
})

// 用 computed 做双向绑定：读 props，写时 emit 回父组件
const formData = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emits('update:modelValue', val)
  }
})

// 表单循环每一选项 change事件
const handleFormItemChange = (value, item) => {
  // 处理表单选项 定制开发
  emits("callHandleFormItemChange", value, item)
}

</script>
<style scoped lang="scss"></style>